<template>
  <div>

    <el-form :model="dataForm" :rules="rules" ref="dataForm" status-icon label-position="left" label-width="100px" size="small" enctype="multipart/form-data">
      <el-form-item label="标题" prop="title">
        <el-input v-model="dataForm.title" placeholder="请输入标题" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="跳转类型:" prop="jumpType">
        <el-select v-model="dataForm.jumpType" placeholder="请选择" default-first-option>
          <el-option label="直播活动" value="0"></el-option>
          <el-option label="跳转链接(web)" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="跳转id" v-if="dataForm.jumpType == 0" prop="liveId" key="liveId">
        <el-input v-model="dataForm.liveId" placeholder="请输入跳转id" oninput="value=value.replace(/[^\d]/g,'')" maxlength='9'></el-input>
      </el-form-item>
      <el-form-item label="跳转地址" v-if="dataForm.jumpType == 1" prop="jumpAddress" key="jumpAddress">
        <el-input v-model="dataForm.jumpAddress" placeholder="请输入跳转地址"></el-input>
      </el-form-item>
      <el-form-item label="分享链接" prop="shareUrl">
        <el-input v-model="dataForm.shareUrl" placeholder="请输入分享链接"></el-input>
      </el-form-item>
      <el-form-item label="上架时间" prop="upperShelfTime">
        <el-date-picker v-model="dataForm.upperShelfTime" type="datetime"  placeholder="请选择上架时间" :picker-options="pickerOptionsStart" @change="changeStart" />
      </el-form-item>
      <el-form-item label="下架时间" prop="lowerShelfTime">
        <el-date-picker v-model="dataForm.lowerShelfTime" type="datetime" :picker-options="pickerOptionsEnd" @change="changeEnd" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择下架时间" />
      </el-form-item>
      <!--上传图片-->
      <!-- <el-form-item label="上传图片" prop="imageUrl">
        <base-pic-upload name=" imageUrl" :accept="'.jpg,.png,.jpeg,.gif,.webp,.bmp'" :on-valid="beforeUpload" ref="imageFile" :file-list="fileList" :hideAllBtn="pageType != 'view'">
        </base-pic-upload>
      </el-form-item> -->
      <el-form-item label="面向用户范围:" prop="userScope">
        <el-select v-model="dataForm.userScope" placeholder="请选择" @change='change'>
          <el-option label="全部" value="0"></el-option>
          <el-option label="会员" value="1"></el-option>
          <el-option label="非会员" value="2"></el-option>
          <el-option label="未登录用户" value="5"></el-option>
          <el-option label="用户群-指定接口" value="7"></el-option>
          <el-option label="用户组id" value="9"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指定接口" v-if="dataForm.userScope == 7" prop="interfaces" key="interfaces">
        <el-input v-model="dataForm.interfaces" placeholder="请输入指定接口" maxlength="40"></el-input>
      </el-form-item>
      <el-form-item label="配置用户组" v-if="dataForm.userScope == 9" prop="userGroupId">
        <el-input v-model="dataForm.userGroupId" placeholder="配置用户组" disabled maxlength="40"></el-input>
        <el-button type="primary" @click="choose()">选择</el-button>
      </el-form-item>
      <el-form-item label="面向客户端范围:" prop="clientScope">
        <el-select v-model="dataForm.clientScope" placeholder="请选择">
          <el-option label="全部" value="0"></el-option>
          <el-option label="ios" value="1"></el-option>
          <el-option label="安卓" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="面向版本范围-后向兼容" prop="versionScope">
        <el-input v-model="dataForm.versionScope" placeholder="请输入版本范围" maxlength="40"></el-input>
        <span> (例: 2.9.4，包括2.9.4版本)</span>
      </el-form-item>

      <el-form-item label="面向版本范围-前向兼容" prop="versionScopeUpward">
        <el-input v-model="dataForm.versionScopeUpward" placeholder="请输入版本范围" maxlength="40"></el-input>
        <span> (例: 2.9.4，不包括2.9.4版本)</span>
      </el-form-item>

      <el-form-item label="面向分省范围" prop="provinceScope">
        <el-checkbox-group v-model="checked">
          <el-checkbox :label="index+1" v-for="(item, index) in a" :key="index" >{{item}}</el-checkbox>
       
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div style="text-align: right; padding: 10px 7px">
      <el-button type="primary" @click="btnSubmit()" ref="btnSubmit">确认</el-button>
      <el-button @click="cancelBtn">取消</el-button>
    </div>

  </div>
</template>

<script>

export default {

  data() {
    var validateImage = (rule, value, callback) => {
      if (!that.$refs.imageFile.hasFile()) {
        callback(new Error('图片不能为空'))
      }
      callback()
    }
    let that = this
    return {
      pickerOptionsStart: {},
      pickerOptionsEnd: {},
      checked: [],
      fileList: [],
      a:['江苏','南京','背景'],
      pageType: 'add',
      titles: '用户组',
      inputshow: false,
      rules: {
        // imageUrl: [{ required: true, validator: validateImage }],
        title: [
          { required: true, message: '请输入1-20汉字', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              if (
                /^(?:\d*|[a-zA-Z]*|[\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]*)$/.test(
                  value
                )
              ) {
                callback(new Error('请输入1-20汉字'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        jumpType: [
          { required: true, message: '请输入跳转类型', trigger: 'blur' }
        ],
        jumpAddress: [
          {
            required: true,
            pattern:
              /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i,
            message: '请输入正确的跳转地址',
            trigger: 'blur'
          }
        ],

        liveId: [
          { required: true, message: '请输入正确的跳转id', pattern: /^[0-9]*$/ }
        ],

        shareUrl: [
          {
            required: true,
            pattern:
              /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i,
            message: '请输入正确的分享地址',
            trigger: 'blur'
          }
        ],
        upperShelfTime: [{ required: true, message: '上架时间不能为空' }],
        lowerShelfTime: [{ required: true, message: '下架时间不能为空' }],
        userScope: [{ required: true, message: '面向用户范围不能为空' }],
        clientScope: [{ required: true, message: '面向客户端范围不能为空' }],
        interfaces: [
          { required: true, message: '请输入接口', trigger: 'blur' }
        ],
        userGroupId: [
          { required: true, message: '用户组不能为空', trigger: 'blur' }
        ]
      },
      dataForm: {
        homepageResourceId: '', // 主键id
        title: '', // 标题
        jumpType: '', // 跳转类型
        shareUrl: '', // 分享链接
        liveId: '', // 分享id 
        jumpAddress: '', // 跳转地址
        upperShelfTime: '', // 上架时间
        lowerShelfTime: '', // 下架时间
        userScope: '',
        modifyTime: '', // 修改时间
        clientScope: '', // 客户端范围
        imageUrl: '', // 图片地址
        versionScope: '', // 后项兼容
        versionScopeUpward: '', // 前项兼容
        userGroupId: '', // 用户组id
        interfaces: '', // 指定接口
        status: 0, // 状态,
        provinceScope: '' // 面向分省范围
      }
    }
  },
  methods: {
    change(e) {

      if (e != 7) {

        // console.log(this.data.interfaces);

        this.$refs.dataForm.clearValidate('interfaces')
        this.dataForm.interfaces = ''
      }
    },
    init(item, pageType) {
      this.pageType = pageType
      if (pageType === 'update') {
        console.info(item)
        this.dataForm.homepageResourceId = item.homepageResourceId
        this.dataForm.title = item.title
        this.dataForm.jumpType = item.jumpType + '' // 跳转类型
        if (item.jumpType === 0) {
          this.dataForm.liveId = item.liveId
        }
        if (item.jumpType === 1) {
          this.dataForm.jumpAddress = item.jumpAddress
        }

        this.dataForm.liveId = item.liveId  // 跳转id
        this.dataForm.shareUrl = item.shareUrl  // 分享链接
        this.dataForm.upperShelfTime = item.upperShelfTime  // 上架时间
        this.dataForm.lowerShelfTime = item.lowerShelfTime  // 下架时间
        this.dataForm.userScope = item.userScope  // 面向用户范围
        this.dataForm.clientScope = item.clientScope // 面向客户端范围
        if (item.provinceScope != null && item.provinceScope !== undefined) {
          var a = item.provinceScope.split(',')
          this.checked = a
        }
        if (item.imageUrl != null) {
          this.fileList.push({
            name: '图片（点击可查看）',
            url: item.imageUrl
          })
        }
        this.dataForm.versionScope = item.versionScope // 面向版本范围-后向兼容
        this.dataForm.versionScopeUpward = item.versionScopeUpward // 面向版本范围-前向兼容
        this.dataForm.provinceScope = item.provinceScope // 面向分省范围
        this.dataForm.userGroupId = item.userGroupId
        this.dataForm.interfaces = item.interfaces
      } else {
        this.dataForm.jumpType = '0' // 默认
        this.dataForm.userScope = '0'
        this.dataForm.clientScope = '0'
      }
    },
    // // 表单确认提交
    btnSubmit() {
      var userScope = this.dataForm.userScope
      if (userScope == '7' && this.dataForm.interfaces != null) {
        console.log(this.dataForm.interfaces, 'inter')
      } else if (userScope == '9' && this.dataForm.userGroupId != null) {
        console.log(this.dataForm.interfaces, 'inter')
      } else {
        this.dataForm.interfaces = null
        this.dataForm.userGroupId = null
      }
      // console.log(this.dataForm.interfaces, this.dataForm.userGroupId, this.dataForm.userScope);
     
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // let b = this.pageType === 'add'
          // this.$http({
          //   url: this.$http.adornUrl(
          //     `/tsHomepageResource/${
          //       b ? 'insertTsHomepageResource' : 'updateTsHomepageResource'
          //     }`
          //   ),
          //   method: b ? 'post' : 'put',
          //   data: formData
          // }).then(({ data }) => {
          //   if (data && data.code === 0) {
          //     this.$message({
          //       message: '操作成功',
          //       type: 'success'
          //     })
          //     this.$parent.hide()
          //     this.$emit('refreshDataList')
          //   } else {
          //     this.$message.error(data.msg)
          //   }
          // })
        }
      })
    },
    changeStart() {
      // 限制开始时间
      if (this.dataForm.lowerShelfTime !== '') {
        if (this.dataForm.lowerShelfTime <= this.dataForm.upperShelfTime) {
          this.$message.warning('上架时间不能晚于下架时间！')
          this.dataForm.upperShelfTime = ''
        }
      }
      this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
        disabledDate: (time) => {
          if (this.dataForm.upperShelfTime) {
            return time.getTime() < this.dataForm.upperShelfTime
          }
        }
      })
    },
    changeEnd() {
      // 限制结束时间
      if (this.dataForm.upperShelfTime !== '') {
        if (this.dataForm.lowerShelfTime <= this.dataForm.upperShelfTime) {
          this.$message.warning('下架时间不能早于上架时间！')
          this.dataForm.lowerShelfTime = ''
        }
      }

      this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
        disabledDate: (time) => {
          if (this.dataForm.lowerShelfTime) {
            return time.getTime() > this.dataForm.lowerShelfTime
          }
        }
      })
    },
    choose() {
      this.titles = '选择用户组'
      this.$refs.addUserGroupDialog.show()
      this.$nextTick(() => {
        this.$refs.addUserGroup.init()
      })
    },
    accSelectBtnCallback(data) {
      this.dataForm.userGroupId = data.groupId
    },
    cancelBtn() {
      this.$parent.hide()
    },
    beforeUpload(file) {
      if (file.size / 1024 / 1024 >= 2) {
        this.$message.error('图片不能超过2M')
        return false
      }
      this.dataForm.imageUrl = file
      return true
    }
  }
}
</script>

<style scoped>
</style>
